import React, { useEffect} from 'react';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import { Breadcrumb, Layout, Menu, theme, Row, Col, Input, Badge, Dropdown, Button, Space, Modal, Image, message } from 'antd';
import { TeamOutlined, UserOutlined, SearchOutlined, MessageOutlined, DownOutlined, IdcardOutlined, KeyOutlined, ExportOutlined, ExclamationCircleFilled, HomeOutlined, FundProjectionScreenOutlined, ProfileOutlined, ShoppingOutlined, TagsOutlined, FundViewOutlined, AccountBookOutlined, SettingOutlined } from '@ant-design/icons';
import './index.scss';
const { confirm } = Modal;

export default function HomeView() {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();
  const location = useLocation();
  // console.log(location)
  // const noLoginUrl = [
  //   //白名单路由
  //   '/login',
  // ];
  useEffect(() => {
    const token = localStorage.getItem('token');
    // 验证 token
    if (!token) {
      messageApi.open({
        type: 'warning',
        content: '请先登录',
      });
      navigate('/login');
      return;
    }
  }, [location.pathname,messageApi,navigate]);
  const { Header, Content, Sider } = Layout;
  const uname = JSON.parse(localStorage.getItem('userInfo')) ? JSON.parse(localStorage.getItem('userInfo')).username : '';
  function getItem(label, key, icon, children) {
    return {
      key,
      icon,
      children,
      label,
    };
  }
  const items = [
    getItem('工作台', '1', <FundProjectionScreenOutlined />),
    getItem('内容', 'sub1', <ProfileOutlined />, [getItem('自定义内容', '2'), getItem('广告位管理', '3'), getItem('热搜词管理', '4'), getItem('评价管理', '5'), getItem('文章管理', '6'), getItem('栏目管理', '7')]),
    getItem('商品', 'sub2', <ShoppingOutlined />, [getItem('商品管理', '8'), getItem('商品分组', '9'), getItem('品牌管理', '10'), getItem('商品管理', '11'), getItem('商品属性', '12')]),
    getItem('订单', 'sub3', <ProfileOutlined />, [getItem('订单管理', '13'), getItem('售后维权', '14'), getItem('批量发货', '15'), getItem('配送管理', '16')]),
    getItem('客户', 'sub4', <TeamOutlined />, [getItem('客户查询', '17'), getItem('客户分群', '18'), getItem('会员设置', '19'), getItem('权益管理', '20'), getItem('权益卡', '21'), getItem('标签管理', '22'), getItem('积分管理', '23')]),
    getItem('营销', 'sub5', <TagsOutlined />, [getItem('场景营销', '24'), getItem('人群运营', '25'), getItem('优惠券', '26'), getItem('拼团', '27'), getItem('秒杀', '28')]),
    getItem('数据', 'sub6', <FundViewOutlined />, [getItem('客户数据', '29'), getItem('流量数据', '30'), getItem('商品数据', '31'), getItem('交易数据', '32'), getItem('会员数据', '33')]),
    getItem('财务', 'sub7', <AccountBookOutlined />, [getItem('资产总览', '34'), getItem('对账管理', '35'), getItem('收支明细', '36')]),
    getItem('系统', 'sub8', <SettingOutlined />, [getItem('角色管理', '37'), getItem('账号管理', '38'), getItem('部门管理', '39'), getItem('操作日志', '40'), getItem('消息管理', '41'), getItem('修改密码', '42'), getItem('个人信息', '43')]),
  ];
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const changeMenu = ({ key }) => {
    console.log(key);
    switch (key) {
      case '1':
        navigate('dashboard');
        break;
      case '2':
      navigate('Custom');
      break;
       case '3':
        navigate('Poster');
        break;
      case '4':
        navigate('SearchForWords');
        break;
       case '5':
        navigate('Evaluate');
        break;
      case '6':
        navigate('Article');
        break;
      case '7':
        navigate('Column');
        break;
      case '13':
        navigate('order-management');
        break;
      case '14':
        navigate('after-sale');
        break;
      case '15':
        navigate('bulk-shipment');
        break;
      case '16':
        navigate('distribution-management');
        break;
      case '34':
        navigate('order-management');
        break;

      case '37':
        navigate('RoleManagement');
        break;
      case '38':
        navigate('AccountManagement');
        break;
      case '39':
        navigate('DepartmentManagement');
        break;
      case '40':
        navigate('Admin');
        break;
      case '8':
        navigate('GoodsManagement');
        break;
      case '9':
        navigate('GoodsGroup')
        break;
      case '10':
        navigate("BrandManagement");
        break;
      case '11':
        navigate('GoodSAttr');
        break;
      case '12':
        navigate('GoodsLabel');
        break;
      case '24':
        navigate('Scenario-marketing');
        break;
      case '26':
        navigate('Coupons');
        break;
      case '28':
        navigate('Seckill')
        break;
      default:
        break;
    }
  };
  // 账号下拉
  const onClick = ({ key }) => {
    if (key === '3') {
      // 退出模态框
      confirm({
        title: '确定要退出登录',
        icon: <ExclamationCircleFilled />,
        width: 250,
        onOk() {
          navigate('/login');
        },
      });
    } else return;
  };
  const dropItems = [
    {
      label: '资料设置',
      key: '1',
      icon: <IdcardOutlined />,
    },
    {
      label: '修改密码',
      key: '2',
      icon: <KeyOutlined />,
    },
    {
      label: '退出登录',
      key: '3',
      icon: <ExportOutlined />,
    },
  ];
  return (
    <Layout
      style={{
        minHeight: '100vh',
      }}
      hasSider>
      <Sider
        width={250}
        style={{
          overflow: 'auto',
          height: '100vh',
          position: 'fixed',
          left: 0,
          top: 0,
          bottom: 0,
        }}
        className='menu-box'>
        <Header
          style={{
            background: '#00284d',
            position: 'sticky',
            top: 0,
            zIndex: 999,
            color: '#fff',
            padding: 0,
            textAlign: 'center',
          }}>
          <Image width={20} src='https://cdn3.axureshop.com/demo/2112109/images/%E7%99%BB%E5%BD%95%E6%B3%A8%E5%86%8C/u12368.svg' />
          <span style={{ marginLeft: 5 }}>汇流成泽电商管理后台</span>
        </Header>
        {/* <div
          style={{
            height: 32,
            margin: 16,
            background: 'rgba(255, 255, 255, 0.2)',
          }}
        /> */}
        <Menu theme='dark' mode='inline' items={items} onClick={changeMenu} />
      </Sider>
      <Layout
        className='site-layout'
        style={{
          marginLeft: 250,
        }}>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
            position: 'sticky',
            top: 0,
            zIndex: 999,
            boxShadow: '0px 2px 5px rgba(208, 208, 208, 0.349019607843137)',
          }}>
          <Row align='middle'>
            <Col span={12}>
              {/* <HomeOutlined style={{ margin: '0 16px', color: '#9d9d9d' }} /> */}
              {/* <Breadcrumb
                style={{
                  display: 'inline-block',
                }}>
                <Breadcrumb.Item>首页</Breadcrumb.Item>
                <Breadcrumb.Item></Breadcrumb.Item>
              </Breadcrumb> */}
            </Col>
            <Col span={5}>
              <Input style={{ borderRadius: 50 }} placeholder='输入需要查找的内容' prefix={<SearchOutlined />} />
            </Col>
            <Col span={3} style={{ textAlign: 'center' }}>
              <Badge count={5} size='small' offset={[8, 0]}>
                <MessageOutlined style={{ color: '#9d9d9d' }} />
                <span style={{ color: '#737373', marginLeft: 3 }}>消息</span>
              </Badge>
            </Col>
            <Col span={4}>
              <Dropdown
                menu={{
                  items: dropItems,
                  onClick,
                }}
                overlayStyle={{ color: '#737373' }}>
                <Button type='plain'>
                  <Space style={{ color: '#737373' }}>
                    <UserOutlined />
                    <span>{uname}</span>
                    <DownOutlined />
                  </Space>
                </Button>
              </Dropdown>
            </Col>
          </Row>
        </Header>
        <Content
          style={{
            margin: '20px 40px',
            // outline: 'dashed green',
          }}>
          <Outlet />
        </Content>
        {/* <Footer
          style={{
            textAlign: 'center',
          }}>
        </Footer> */}
      </Layout>
      {contextHolder}
    </Layout>
  );
}
